<template>
  <!-- 预览视频 -->
  <el-dialog v-model="previewVideoVisible" title="视频预览" destroyOnClose width="calc(45vmin + 32px)" appendTo="body" lockScroll draggable alignCenter>
    <video controls autoplay :src="src" :poster="poster" :style="{ width, height }"></video>
  </el-dialog>
</template>

<script setup lang="ts">
  const previewVideoVisible = ref(false);
  const src = ref('');
  const poster = ref('');
  const width = ref('45vmin');
  const height = ref('80vmin');

  /**
   * 显示
   */
  function show(data: { src: string; poster?: string; width?: string; height?: string }) {
    src.value = data.src;
    poster.value = data.poster || '';
    width.value = data.width || '45vmin';
    height.value = data.height || '80vmin';
    previewVideoVisible.value = true;
  }

  /**
   * 隐藏
   */
  function hide() {
    previewVideoVisible.value = false;
  }

  defineExpose({ hide, show });
</script>
